<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#div1{width: 100px; height: 100px; background-color: red;position: absolute; left:0; top: 50px;}
		#div2{width: 1px; height: 300px; background-color: #000;position: absolute; left: 600px; top: 0;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oDiv = document.getElementById('div1');
		var iSpeed = 0;
		var timer = null;
		var pos = 0;

		timer = setInterval(function (){
			pos = parseInt(getStyle(oDiv, 'width'));

			iSpeed +=(600 - pos )/5;
			iSpeed = iSpeed*0.7;
			pos += iSpeed;

			oDiv.style.width = pos + 'px';	

			if (Math.abs(iSpeed) < 1 && Math.abs(pos - 600)<1) {
				oDiv.style.width = 600 + 'px';
				clearInterval(timer);
			};

			//测试
			document.title = oDiv.offsetWidth;
			oDiv.innerHTML = iSpeed;
		},30)
	}

	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
	}
	</script>
</head>
<body>
	<div id="div1"></div>
	<div id="div2"></div>
	<p></p>
</body>
</html>